
<html xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
<style>
    .topdiv {
        height: 50px;
    }

    tr {
        height: 50px;
    }

    td {
        border: 1px black solid;
        text-align: center;

    }
    *{
        margin: 0 auto;
    }
    .layui-timeline {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 20px 0;
    }

    .layui-timeline-item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .layui-timeline-title {
        margin-top: 10px;
    }

    .layui-timeline-line {
        position: absolute;
        width: 100%;
        height: 2px;
        top: 8px;
        background-color: #e6e6e6;
    }
    .layui-input-wrap{
        border:  2px solid;
    }
</style>
<body>
<div style="width: 1100px;height: 750px;padding-left: 50px;">
    <input style="display: none" th:value="${AttendanceModel.id}" id="pid">
    <div class="topdiv"><strong>附件1</strong>
    </div>
    <div class="topdiv" style="text-align: center;font-size: 25px;font-weight: 400"> <span id="">
					异常考勤表
				</span></div>
    <div class="topdiv" style="justify-content: space-between;display: flex;">
        <div>
            <span>编号</span>
            <span th:text="${AttendanceModel.id}">编号</span>
        </div>
        <div>
            <span>日期</span>
            <span th:text="${#dates.format(process.applyTime, 'yyyy-MM-dd')}"></span>
            <a id="downloadBtn" class="layui-btn layui-btn-xs" lay-event="download">下载</a>
            <a class="layui-btn layui-btn-xs" lay-event="print" onclick="printPage()">打印</a>
        </div>
    </div>
    <table style="border-collapse:collapse;width: 1100px">
        <tr>
            <td>员工姓名</td>
            <td th:text="${process.applyRealName}"></td>
            <td>部门</td>
            <td th:text="${AttendanceModel.departmentName}"></td>
            <td>职位</td>
            <td th:text="${AttendanceModel.positionName}"></td>
        </tr>
        <tr>
            <td>异常日期</td>
            <td colspan="5">
                <div style="display: flex">
                    <span th:if="${AttendanceModel.firstExceptionDate != null}" th:text="${AttendanceModel.firstExceptionDate}"></span><br>
                    <span th:if="${AttendanceModel.secondExceptionDate != null}"  th:text="${AttendanceModel.secondExceptionDate}"></span><br>
                    <span th:if="${AttendanceModel.thirdExceptionDate != null}"  th:text="${AttendanceModel.thirdExceptionDate}"></span><br>
                    <span th:if="${AttendanceModel.fourthExceptionDate != null}"  th:text="${AttendanceModel.fourthExceptionDate}"></span><br>
                    <span th:if="${AttendanceModel.fifthExceptionDate != null}"  th:text="${AttendanceModel.fifthExceptionDate}"></span>
                </div>

            </td>
        </tr>
        <tr>
            <td>备注</td>
            <td colspan="5" th:text="${AttendanceModel.remarks}"></td>
        </tr>
<!--        <tr>-->
<!--            <td>附件</td>-->
<!--            <td colspan="5"><div th:if="${AttendanceModel.fileAddress != null}"><img style="width: 200px;height: 200px" onclick="imgcli(this)" th:src="'/file/img?imgaddress='+ ${AttendanceModel.fileAddress}"></div></td>-->
<!--        </tr>-->
        <tr th:if="${process.auditerStatus >=200}">
            <td>拒绝理由</td>
            <td colspan="5" th:text="${process.rejectReason}"></td>
        </tr>
        <tr th:if="${isauditing} eq '1'">

            <td>审批状态</td>
            <td colspan="5"  >
                <div th:unless="${process.auditerStatus > process.auditingCount}">
                    <div  style="display: flex;height: 50%;align-items: center">

                        <div style="text-align: center;margin-top: 10px;margin-left: 10px"><button  style="width: 100px;background-color: green" type="button" class="layui-btn" id="b1">审核通过</button></div>
                        <div th:if="${process.auditerStatus == process.auditingCount}" >
                            <input type="text" style="display: none" id="auditingperson" name="auditingperson" value="占位">
                        </div>
                        <div th:if="${process.auditerStatus < process.auditingCount}" style="display: flex;height: 50%;align-items: center">
                            <div style="text-align: center;margin-left: 20px">转发给:</div>
                            <div style="text-align: center;margin-left: 20px">  <form class="layui-form" action="" >
                                <select id="auditingperson" name="auditingperson" >
                                    <option value=""></option>
                                    <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
                                </select>
                            </form></div>
                        </div>

                    </div>
                </div>
                <div style="height: 50%;display: flex;align-items: center">
                    <div style="text-align: center;margin-left: 10px;margin-top: 10px;margin-bottom: 10px"><button style="width: 100px" type="button" class="layui-btn layui-btn-danger" id="b2">驳回</button></div>
                    <div style="text-align: center;margin-left: 20px">备&nbsp;&nbsp;&nbsp;&nbsp;注:</div>
                    <div style="text-align: center;margin-left: 20px">
                        <textarea name="rejectReason" id="rejectReason" cols="55" rows="2"></textarea>
                    </div>

                </div>


            </td>

        </tr>
        <tr th:if="${isauditing} eq '1'">
            <td>抄送给</td>
            <td colspan="7"  >
                <div id="copyPersonSelect" class="xm-select-demo"></div>

            </td>
        </tr>
        <tr >
            <td>已抄送给</td>
            <td colspan="7" >
                <span th:each="object : ${copyperson}" th:text="${object}+'&nbsp;'"></span>
            </td>
        </tr>
        <tr>
            <td colspan="6" style="text-align: left">
<!--                <div class="layui-timeline" th:with="persons=${#strings.arraySplit(process.auditingPersonRealName, '|')},reviewStatus=${#strings.arraySplit(process.reviewStatus, '|')}">-->
<!--                    <div class="layui-timeline-item" th:each="person, iterStat : ${persons}" th:if="${!iterStat.last}">-->
<!--                        <div th:if="${reviewStatus != null and #lists.size(reviewStatus) > iterStat.index and reviewStatus[iterStat.index] == '2'}" style="width:20px;height: 20px;border-radius: 50%;background-color: red;z-index: 10000"></div>-->
<!--                        <div th:if="${reviewStatus != null and #lists.size(reviewStatus) > iterStat.index and reviewStatus[iterStat.index] == '3'}" style="width:20px;height: 20px;border-radius: 50%;background-color: green;z-index: 10000"></div>-->
<!--                        <div th:if="${reviewStatus != null and #lists.size(reviewStatus) > iterStat.index and reviewStatus[iterStat.index] == '1'}" style="width:20px;height: 20px;border-radius: 50%;background-color: green;z-index: 10000"></div>-->
<!--                        <div class="layui-timeline-title" th:text="${person}"></div>-->
<!--                        <span class="layui-timeline-line"></span>-->
<!--                    </div>-->
<!--                    <div class="layui-timeline-item" th:each="person, iterStat : ${persons}" th:if="${iterStat.last}">-->
<!--                        <div th:if="${process.auditerStatus == 200 and (reviewStatus == null or #lists.size(reviewStatus) <= iterStat.index or reviewStatus[iterStat.index] == '3')}" style="width:20px;height: 20px;border-radius: 50%;background-color: #806a00;z-index: 10000"></div>-->
<!--                        <div th:if="${process.auditerStatus == 100}" style="width:20px;height: 20px;border-radius: 50%;background-color: green;z-index: 10000"></div>-->
<!--                        <div th:if="${process.auditerStatus < 100}" style="width:20px;height: 20px;border-radius: 50%;background-color: #806a00;z-index: 10000"></div>-->
<!--                        <div class="layui-timeline-title" th:text="${person}"></div>-->
<!--                        <span class="layui-timeline-line"></span>-->
<!--                    </div>-->
<!--                </div>-->
                <div th:if="${StatusEntity == null}">
                    <div class="layui-timeline" th:with="persons=${#strings.arraySplit(process.auditingPersonRealName, '|')},reviewStatus=${#strings.arraySplit(process.reviewStatus, '|')}">
                        <div class="layui-timeline-item" th:each="person, iterStat : ${persons}" th:if="${!iterStat.last}">
                            <div th:if="${reviewStatus != null and #lists.size(reviewStatus) > iterStat.index and reviewStatus[iterStat.index] == '2'}" style="width:20px;height: 20px;border-radius: 50%;background-color: red;z-index: 10000"></div>
                            <div th:if="${reviewStatus != null and #lists.size(reviewStatus) > iterStat.index and reviewStatus[iterStat.index] == '3'}" style="width:20px;height: 20px;border-radius: 50%;background-color: green;z-index: 10000"></div>
                            <div th:if="${reviewStatus != null and #lists.size(reviewStatus) > iterStat.index and reviewStatus[iterStat.index] == '1'}" style="width:20px;height: 20px;border-radius: 50%;background-color: green;z-index: 10000"></div>
                            <div class="layui-timeline-title" th:text="${person}"></div>
                            <span class="layui-timeline-line"></span>
                        </div>
                        <div class="layui-timeline-item" th:each="person, iterStat : ${persons}" th:if="${iterStat.last}">
                            <div th:if="${process.auditerStatus == 200 and (reviewStatus == null or #lists.size(reviewStatus) <= iterStat.index or reviewStatus[iterStat.index] == '3')}" style="width:20px;height: 20px;border-radius: 50%;background-color: #806a00;z-index: 10000"></div>
                            <div th:if="${process.auditerStatus == 100}" style="width:20px;height: 20px;border-radius: 50%;background-color: green;z-index: 10000"></div>
                            <div th:if="${process.auditerStatus < 100}" style="width:20px;height: 20px;border-radius: 50%;background-color: #806a00;z-index: 10000"></div>
                            <div class="layui-timeline-title" th:text="${person}"></div>
                            <span class="layui-timeline-line"></span>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 20px">
                    <div class="layui-timeline-item" style="margin-left: 20px" th:each="i : ${#numbers.sequence(1, 18)}" th:if="${StatusEntity != null and StatusEntity['text' + i] != null}">
                        <i class="layui-icon layui-timeline-axis layui-icon-circle-dot" th:style="'color: ' + (${StatusEntity['status' + i]} == 1 ? 'green' : (${StatusEntity['status' + i]} == 2 ? 'red' : '#806a00'))"></i>
                        <span th:text="${StatusEntity['text' + i]}" style="margin-left: 15px;"></span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    layui.use(['dropdown', 'util', 'layer'], function(){
        var $= layui.$
        var keys = []
        var xm
        //抄送复选框初始化
        $.ajax({
            url: "/user/queryforselect",
            type: "post",
            async: true,
            success: function (data) {
                if(data.data){
                    for (var i = 0; i < data.data.length; i++) {
                        var temp = {
                            "name": data.data[i].realName,
                            "value": data.data[i].username  //value为唯一标识，此处为id
                        }
                        keys.push(temp)
                    }
                    xm=xmSelect.render({
                        el: '#copyPersonSelect',
                        direction: 'up',
                        filterable: true,
                        data: keys
                    })
                }
            },
        });

        var pid= $("#pid").val()
        $("#b1").click(function(){
            $("#b1").attr("disabled", "disabled");
            var copyPersons = xm.getValue();
            var rejectReason=$("#rejectReason").val()
            var auditingperson=$("#auditingperson").val()
            if(typeof rejectReason !== 'undefined'&&rejectReason.length>=100){
                $("#b1").removeAttr("disabled");
                layer.msg('失败原因应当小于100字');
                return;
            }
            if(typeof auditingperson == 'undefined'||auditingperson.length<1){
                $("#b1").removeAttr("disabled");
                layer.msg('转发给不能为空');
                return;
            }
            var sindex= layer.load(2, {shade: [0.5,'#000']});
            window.parent.postMessage( $("#pid").val(), '*');
            $.ajax({
                url: '/process/auditingresult',
                data: {
                    id: pid,
                    auditing: true,
                    rejectReason:rejectReason,
                    auditingperson:auditingperson,
                    copyPersons:JSON.stringify(copyPersons)
                },
                type: 'post',
                success: function (data) {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.location.reload();
                    parent.layer.close(index);
                    layer.close(sindex)
                }, error: function () {
                    $("#b1").removeAttr("disabled");
                    layer.close(sindex)
                }
            });
        });
        $("#b2").click(function(){
            $("#b2").attr("disabled", "disabled");
            var rejectReason=$("#rejectReason").val()
            var copyPersons = xm.getValue();
            var auditingperson=$("#auditingperson").val()
            if(typeof rejectReason !== 'undefined'&&rejectReason.length<1){
                layer.msg('请填写驳回原因');
                $("#b2").removeAttr("disabled");
                return;
            }
            if(typeof rejectReason !== 'undefined'&&rejectReason.length>=100){
                layer.msg('驳回原因应当小于100字');
                $("#b2").removeAttr("disabled");
                return;
            }
            var sindex= layer.load(2, {shade: [0.5,'#000']});
            window.parent.postMessage( $("#pid").val(), '*');
            layui.$.ajax({
                url: '/process/auditingresult',
                data: {
                    id: pid,
                    auditing: false,
                    rejectReason:rejectReason,
                    auditingperson:auditingperson,
                    copyPersons:JSON.stringify(copyPersons)
                },
                type: 'post',
                success: function (data) {
                    layer.close(sindex)
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.location.reload();
                    parent.layer.close(index);
                }, error: function () {
                    $("#b2").removeAttr("disabled");
                    layer.close(sindex)
                }
            });
        });
    });
</script>


<!--打印/下载-->
<script>
    function printPage() {
        window.print();
    }


    document.getElementById("downloadBtn").addEventListener("click", function() {
        // 获取需要截屏的容器和其滚动高度
        const container = document.body;
        const scrollHeight = container.scrollHeight;

        // 设置每次滚动的高度
        const scrollStep = 2000; // 每次滚动的高度

        // 创建一个画布，用于绘制拼接后的图片
        const canvas = document.createElement('canvas');
        canvas.width = container.offsetWidth;
        canvas.height = scrollHeight;

        // 获取画布的上下文
        const context = canvas.getContext('2d');

        // 定义一个异步函数，用于逐步滚动、截取和拼接内容
        async function scrollAndCapture(scrollPosition) {
            // 滚动到指定位置
            container.scrollTop = scrollPosition;

            // 等待一段时间，确保内容加载完成
            await new Promise(resolve => setTimeout(resolve, 500));

            // 截取当前位置的内容
            const screenshot = await html2canvas(container);

            // 绘制截图到画布上指定位置
            context.drawImage(screenshot, 0, scrollPosition);

            // 判断是否还有剩余内容需要截取
            if (scrollPosition + container.offsetHeight < scrollHeight) {
                // 继续滚动并截取下一部分内容
                await scrollAndCapture(scrollPosition + scrollStep);
            } else {
                // 所有内容都已截取完成，生成最终的图片
                const finalScreenshot = canvas.toDataURL('image/png');

                // console.log('Sending image: ', finalScreenshot);

                // // 发送POST请求
                // $.ajax({
                //     url: '/download-to-word',
                //     type: 'POST',
                //     data: JSON.stringify({ image: finalScreenshot }),
                //     contentType: 'application/json; charset=utf-8',
                //     dataType: 'json',
                //     success: function(response) {
                //         console.log('图片发送成功');
                //     },
                //     error: function(xhr, status, error) {
                //         console.error('发生错误', status, error);
                //     }
                // });


                // 创建一个链接元素
                var link = document.createElement("a");
                link.href = finalScreenshot;
                link.download = "scrollable-content.png"; // 下载的文件名
                // 触发点击事件以下载图片
                link.click();
            }
        }

        // 开始滚动截取内容
        scrollAndCapture(0);
    });

</script>




</html>